<template>
    <view class="userinfo-top">
        <image :src="userInfo.avatar" mode="aspectFill" />
        <text v-if="userInfo.nickname">{{ userInfo.nickname }}</text>
        <text v-else @tap="login">登录后获取更多服务</text>
    </view>
    <view class="my-service">
        <view v-for="(item, index) in serviceList" :key="index" @tap="serviceDetail(index)">
            <image :src="item.icon" mode="widthFix" />
            <text>{{ item.text }}</text>
        </view>
    </view>
</template>
<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
const userInfo = ref({
    nickname: "",
    avatar: "https://bucket-chabaidao-1308160773.cos.ap-guangzhou.myqcloud.com/img/1713410939060vatar.webp"
});
const serviceList = ref([
    {
        icon: '/static/personal/ziliao.png',
        text: '个人资料'
    },
    {
        icon: '/static/personal/kefu.png',
        text: '联系客服'
    },
    {
        icon: '/static/personal/dizhi.png',
        text: '收货地址'
    },
    {
        icon: '/static/personal/fuli.png',
        text: '社群福利'
    },
    {
        icon: '/static/personal/jiameng.png',
        text: '加盟申请'
    },
    {
        icon: '/static/personal/huizhang.png',
        text: '我的徽章'
    },
    {
        icon: '/static/personal/liping.png',
        text: '礼品卡'
    },
    {
        icon: '/static/personal/liquan.png',
        text: '礼券兑换'
    }
]);
onShow(() => {
    const cacheUserInfo = uni.getStorageSync("userInfo");
    if (cacheUserInfo) {
        userInfo.value = cacheUserInfo;
    }
});
const login = () => {
    uni.navigateTo({ url: "/pages/login/index" });
};
const serviceDetail = (index: number) => {
    const pathList = ["editUser", "contactService", "selectAddress"];
    if (index < 3) {
        uni.navigateTo({ url: `/pages/${pathList[index]}/index` });
    } else {
        uni.showToast({ title: "敬请期待", icon: "none" });
    }
};
</script>
<style>
.userinfo-top {
    background-color: #e2eafd;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50rpx 0;
}

.userinfo-top image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
}

.userinfo-top text {
    font-size: 32rpx;
    font-weight: bold;
}

.my-service {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 6rpx;
}

.my-service view {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 27rpx;
    padding: 25rpx 0;
}

.my-service image {
    width: 50rpx;
    margin-bottom: 10rpx;
}
</style>